<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onRowSelectChange="selectChange"
      columnsRef="jzySeries"
      :onColumnsChange="columns => this.columns = columns"
    >
    </FilterTable>
    <Drawer
      :title="dialogTitle"
      :visible.sync="showAddNew"
      :width="920"
      :closable=true
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <partordertypedetil :rowData="formData"  @close="dialogClose"></partordertypedetil>
    </Drawer>

    <Drawer
      :title="dealerdetilTitle"
      :visible.sync="showAdd"
      :width="1080"
      :closable=true
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <dealerdetil :rowData="formDataDealerdetil"  @close="dialogClose1"></dealerdetil>
    </Drawer>
  </div>
</template>

<script>
  import partordertypedetil from './partordertypedetil'
  import dealerdetil from './dealerdetil'
  import { dictionary } from '@/utils/dictMixin';
  import { getPartOrderTypeList,doupdate } from '@/api/partsmanage/partordertype/index';
  import {ddlxArr} from '@/pages/partsmanage/purchaseManage/purchaseSubmit/constant';
    export default {
      name: "index",
      mixins: [dictionary],
      components: {
        partordertypedetil,
        dealerdetil
      },
      data() {
        return{
          topFilterList: this.createTopFilterList(),
          columns: this.createTableColumns(),
          fetchApi: getPartOrderTypeList,
          fetchParams: null,
          dialogTitle:'',
          visibleDrawer: false,
          title: '新增',
          dealerdetilTitle:'配件经销商明细',
          formDataDealerdetil:{},
          showAdd:false,
          type:'',
          formData:{},
          rowSelectData: [],
          showAddNew:false,
        };
      },
      created() {
      },
      methods: {
        dialogedit(row){
          this.formData = row;
          this.dialogTitle = `添加配件`;
          this.showAddNew = true;
        },
        dialogedit1(row){
          this.formDataDealerdetil = row;
          this.showAdd = true;
        },
        dialogClose(){
          this.showAddNew = false
            // 重新加载
          this.fetchParams = { ...this.fetchParams };
        },
        dialogClose1(){
          this.showAdd = false
          // 重新加载
          this.fetchParams = { ...this.fetchParams };
        },
        createTopFilterList() {
          return[
            {
              type: 'SELECT',
              label: '订单类型',
              fieldName: 'xsddlx',
              placeholder: '请选择...',
              itemList: ddlxArr
            }
          ]
        },
        createTableColumns () {
          return [
            {
              title: '操作',
              dataIndex: 'column-action',
              width: 170,
              fixed: 'left',
              render: (props) => {
                return (
                  <div>
                  <el-button size="mini" type="text" onClick={() => this.dialogedit(props.row)}>
                配件明细
                </el-button>
                </div>
              );
              }
            },
            {
              title: '序号',
              dataIndex: 'index',
              width: 70,
              sorter: true,
              render: props => {
                return <span>{props.row.index + 1}</span>;
              }
            },
            {
              title: '订单类型',
              dataIndex: 'xsddlx',
              sorter: true,
              dictItems: ddlxArr,
            },
            {
              title: '最低起订金额',
              dataIndex: 'pjlxje',
              sorter: true,
              editType:'number',
              defaultEditable:true,
              editable: true,
              onChange:(index,data)=>{
                this.changeDiscount(index,data)
              }
            },
            {
              title: '月提报次数',
              dataIndex: 'pjlxcs',
              sorter: true,
              editType:'number',
              defaultEditable:true,
              editable: true,
              onChange:(index,data)=>{
                this.changeDiscount(index,data)
              }
            },
            // {
            //   title: '油最低起订金额',
            //   dataIndex: 'pjlxjey',
            //   sorter: true,
            //   editType:'number',
            //   defaultEditable:true,
            //   editable: true,
            //   onChange:(index,data)=>{
            //     this.changeDiscount(index,data)
            //   }
            // },
            // {
            //   title: '油月提报次数',
            //   dataIndex: 'pjlxcsy',
            //   sorter: true,
            //   editType:'number',
            //   defaultEditable:true,
            //   editable: true,
            //   onChange:(index,data)=>{
            //     this.changeDiscount(index,data)
            //   }
            // }
          ]
        },
        changeDiscount(index,data){
         doupdate(data).then(res=>{
           if (res.resultCode === 200) {
             this.$notify.success({title: '提示信息',message:'操作成功!'});
             // 重新加载
             this.dialogClose();
           }else {
             this.$notify.error({title: '提示信息',message:res.errMsg||'操作失败!'});
             this.dialogClose();
           }
         })
        },
        selectChange(val) {
          console.log('val', val);
          this.rowSelectData = val;
        },
        changeHandle(val) {
          this.fetchParams = Object.assign({}, val);
        },
        collapseHandle() {
          this.$nextTick(() => {
            this.BaseTable.EXECUTE_RESET_HEIGHT();
          });
        },
      }
    }
</script>

<style scoped>

</style>
